<template>
  <div class="scrolling-text" :style="{ width, height }">
    <span><slot></slot></span>
  </div>
</template>

<script lang="ts" setup>
  defineProps({
    width: { type: String, default: "100%" },
    height: { type: String, default: "" },
  })
</script>

<style lang="scss" scoped>
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.scrolling-text {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;

  span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite; /* 调整动画时长和效果 */
  }
}
</style>